<template>
	<HomeHeader></HomeHeader>
	<div style="margin-top: 10px;">
	<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
	 <van-swipe-item v-for="image in images" :key="image" class="ig">
	    <img :src="image" style="height: 100%;" />
	  </van-swipe-item>
	</van-swipe>
	</div>
	<div style="margin-top: 10px;">
		<van-grid clickable :column-num="4" :border="false">
		  <van-grid-item  icon="bar-chart-o" text="排行榜" to="/" />
		  <van-grid-item icon="play-circle-o" text="最近播放" to="/" />
		  <van-grid-item icon="calendar-o" text="每日推荐" to="/" />
		  <van-grid-item icon="goods-collect-o" text="已购" to="/" />
		</van-grid>
	</div>
	<hr />
	<van-cell-group title="推荐歌单" >
		<van-grid clickable :column-num="4" :border="false" >
		  <van-grid-item >
		      <van-image src="https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg" 
			 style="" text="asd" to="/"/>
		    </van-grid-item>
			<van-grid-item >
			    <van-image src="https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg" 
						 style="" text="asd" to="/"/>
			  </van-grid-item>
			  <van-grid-item >
			      <van-image src="https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg" 
			  			 style="" text="asd" to="/"/>
			    </van-grid-item>
				<van-grid-item >
				    <van-image src="https://webstatic.mihoyo.com/upload/contentweb/2022/04/20/aa7fdd276ad848d02f28f7f86264d386_4205942631348108574.jpg" 
							 style="" text="asd" to="/"/>
				  </van-grid-item>
		  
		</van-grid>
	</van-cell-group>

</template>

<script setup>
	import HomeHeader from "_c/header/HomeHeader.vue"
	import { ref } from 'vue';
	 const active = ref(0);
	  const images = [
	      'https://uploadstatic.mihoyo.com/contentweb/20210922/2021092217442572336.png',
		  'https://webstatic.mihoyo.com/upload/contentweb/2022/09/27/8a0cb3ea0027ea41527c6e96d9fa125f_1191188521518151810.png',
		  'https://webstatic.mihoyo.com/upload/contentweb/2022/08/16/0b8632a0c1501c7de882cb08789fcf0c_1230141489251612305.png',
		  'https://webstatic.mihoyo.com/upload/contentweb/2022/09/27/21031b52530de7e1f447d1999fdf7687_7651660074082305936.png'
	    ];
	
</script>

<style>
	.my-swipe .van-swipe-item {
	color: #fff;
	font-size: 40px;
	height: 200px;
	text-align: center;
	background-color: white;
	}
	.ig{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		}
</style>